import React from "react";
import styles from './index.module.scss';
import { Button } from 'antd';
import { useState } from "react";
// 导入图片
// 头部
import headerlight from '../../assets/images/ceil.png'
import headerdark from '../../assets/images/ceil-day.png'
// 背景
import lightTheme from '../../assets/images/bg-day.png';
import darkTheme from '../../assets/images/indexLightBackground.png'
// 脚部
import footerlight from '../../assets/images/floor.png'
import footerdark from '../../assets/images/floor-day.png'
//视频图片
import videolight from '../../assets/images/border-day.png'
import videodark from '../../assets/images/border.png'
// 3D人体展示
import MyModeo from '../../components/myModeo'
// 视频// 视频路径
import v1 from '../../assets/video/a.mp4'
import v2 from '../../assets/video/b.mp4'
import v3 from '../../assets/video/c.mp4'
import v4 from '../../assets/video/d.mp4'

// 定义主题图片的路径
const themes = {
    light: lightTheme,
    dark: darkTheme
}
// 定义视频的路径
const videos = {
    light: [v1, v2, v3, v4],  // light主题下的所有视频
    dark: [v1, v2, v3, v4]     // dark主题下的所有视频
};
// 模型的文件路径
const Index: React.FC = () => {
    // const a=1;

    // 初始值设置为 'light'
    const [currentTheme, setCurrentTheme] = useState<string>('light');
    // 初始值设置为 0
    const [currentVideoIndex, setCurrentVideoIndex] = useState<number>(0);
    // 切换主题的函数
    const toggleTheme = () => {
        // 切换主题，当前是 light 就切换到 dark，反之亦然
        setCurrentTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
    };

    // 视频播放完后的事件处理函数
    const handleVideoEnd = () => {
        // 获取当前主题对应的视频数组
        const videoList = videos[currentTheme];
        // 如果视频还未播放完所有视频，则播放下一个视频
        if (currentVideoIndex < videoList.length - 1) {
            setCurrentVideoIndex(currentVideoIndex + 1);
        } else {
            // 如果是最后一个视频，循环回到第一个
            setCurrentVideoIndex(0);
        }
    };

    return (
        <div className={styles.homebox}>
            <header>
                {/* 根据当前的主题切换头部图片 */}
                <img src={currentTheme === 'light' ? headerlight : headerdark} alt="" />
                <div>
                    <Button className={styles.btnSand}>进入3D展览馆</Button>
                    <Button onClick={toggleTheme}>切换主题</Button>
                </div>
            </header>
            <div className={styles.content}>
                {/* 根据当前的主题切换图片 */}
                <img
                    src={themes[currentTheme]}
                    alt="Current Theme"
                    className={styles.backgroundImage}
                />
                <div className={styles.SanBox}>
                    {/* 3D人体展示区域 */}
                    <div className={styles.SanRen}>
                        <MyModeo></MyModeo>
                    </div>
                    {/* 叠加图 */}
                    <div className={styles.overlayImage}>
                        <img
                            src={currentTheme === 'light' ? videolight : videodark}
                            alt="Overlay"
                            className={styles.overlayImageContent}
                        />
                    </div>
                    {/* 视频展示区域 */}
                    <div className={styles.videoContainer}>
                        <video
                            src={videos[currentTheme][currentVideoIndex]}
                            autoPlay
                            controls
                            onEnded={handleVideoEnd}  // 监听视频播放结束
                            className={styles.video}
                        />
                    </div>
                </div>

                <footer>
                    {/* 根据当前的主题切换脚部图片 */}
                    <img src={currentTheme === 'light' ? footerlight : footerdark} alt="" />
                </footer>
            </div>

        </div>
    );
};

export default Index;


